<template>
  <div class="frame-page">
    <div class="h-panel">
      <div class="flex justify-between p-10px">
        <div class="flex">
          <label for="name" class="mr-10px"></label>
          <Input id="name" v-model="params.name" class="flex-1" placeholder="请输入组织名称"/>
          <Button color="primary" icon="fa fa-search" :loading="loading" @click="doSearch">查询</Button>
        </div>
        <div>
          <Button @click="showForm()" color="primary" >添加</Button>
        </div>
      </div>
    </div>
    <vxe-table row-id="id"
               height="auto"
               :stripe="false"
               :tree-config="{transform:true, rowField: 'id', parentField: 'parentId'}"
               ref="table"
               :data="dataList"
               highlight-hover-row
               show-overflow
               border
               :row-config="{height: 48}"
               :loading="loading">
      <vxe-column type="seq" width="60" align="center" title="#"/>
      <vxe-column title="类型" field="type" width="100" align="center">
        <template #default="{row}">
          <Tag color="blue" v-if="row.type === 0" @click="trigger(row)" >机构</Tag>
          <Tag color="gray" v-else @click="trigger(row)" >部门</Tag>
        </template>
      </vxe-column>
      <vxe-column title="编码" field="code" width="100" align="center"/>
      <vxe-column title="名称" field="name" tree-node align="left"/>

      <vxe-column title="联系人" field="linkman" width="100"/>
      <vxe-column title="联系人电话" field="phone" width="100"/>
      <vxe-column title="创建时间" field="createDate" width="140"/>
      <vxe-column title="状态" field="enabled" width="80" align="center" fixed="right">
        <template #default="{row}">
          <Tag color="green" v-if="row.enabled" @click="trigger(row)" class="cursor-pointer">启用</Tag>
          <Tag color="red" v-else @click="trigger(row)" class="cursor-pointer">禁用</Tag>
        </template>
      </vxe-column>
      <vxe-column title="操作" align="center" width="200" fixed="right">
        <template #default="{row}">
          <div class="flex items-center justify-center">
            <span class=" primary-color text-hover ml-10px" v-if="row.enabled" @click="showForm(null,row)" size="s">创建下级</span>
            <span class=" primary-color text-hover ml-10px" @click="showForm(row)" size="s">编辑</span>
          </div>
        </template>
      </vxe-column>
    </vxe-table>
    <Pagination align="right" class="mt-16px" v-model="pagination" @change="pageChange" small/>
  </div>

</template>

<script>
import Organization from "@js/api/Organization";
import {confirm, message} from "heyui";
import OrganizationForm from "./OrganizationForm.vue";
import {layer} from "@layui/layer-vue";
import {h} from "vue";

/**
 * @功能描述: 组织机构
 * @创建时间: 2023年08月08日
 * @公司官网: www.fenxi365.com
 * @公司信息: 纷析云（杭州）科技有限公司
 * @公司介绍: 专注于财务相关软件开发, 企业会计自动化解决方案
 */
export default {
  name: "OrganizationList",
  props: {
    merchant: Object,
  },
  components: {OrganizationForm},
  data() {
    return {
      opened: true,
      loading: false,
      params: {
        name: null,
        merchantId: null,
      },
      checkedRows: [],
      dataList: [],
      merchantList: [],
      pagination: {
        page: 1,
        size: 20,
        total: 0
      },
      param: [
        {title: '启用', key: 'enabled'},
        {title: '禁用', key: 'disabled'},
      ]

    }
  },
  computed: {
    queryParams() {
      return Object.assign(this.params, {})
    }
  },
  methods: {
    showForm(organization, parent) {
      let layerId = layer.open({
        title: "机构信息",
        shadeClose: false,
        closeBtn: false,
        area: ['50vw', 'auto'],
        content: h(OrganizationForm, {
          organization, parent,
          onClose: () => {
            layer.close(layerId);
          },
          onSuccess: () => {
            this.doSearch();
            layer.close(layerId);
          }
        })
      });
    },
    loadList() {
      this.loading = true;
      Organization.list(this.queryParams).then(({data}) => {
        this.dataList = data;
      }).finally(() => this.loading = false);
    },
    doSearch() {
      this.loadList();
    },
    doRemove(row) {
      confirm({
        title: "系统提示",
        content: `确认删除：${row.name}?`,
        onConfirm: () => {
          Organization.remove(row.id).then(() => {
            message("删除成功~");
            this.doSearch();
          })
        }
      })
    },
    trigger(row) {
      let enabled = !row.enabled;
      confirm({
        title: "系统提示",
        content: `确认要「${enabled ? "启用" : "禁用"}」：${row.name}?`,
        onConfirm: () => {
          Organization.save({id: row.id, enabled}).then(() => {
            message("操作成功~");
            this.loadList();
          })
        }
      })
    },
    init() {

    }
  },
  created() {
    this.init();
    this.doSearch();
  }
}
</script>
